<ion-header>

  <ion-navbar>
    <ion-title>财务记录</ion-title>
    <!--<ion-toolbar no-border-top>
      <ion-buttons end>
        <button ion-button [navPush]="'BonusRecordPage'">奖金明细</button>
      </ion-buttons>
    </ion-toolbar>-->
  </ion-navbar>
  <ion-toolbar no-border-bottom>
    <ion-segment [(ngModel)]="record" (ngModelChange)="curChecked($event)">
      <ion-segment-button value="all">
        全部
      </ion-segment-button>
      <ion-segment-button value="in">
        转入
      </ion-segment-button>
      <ion-segment-button value="out">
        转出
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

</ion-header>


<ion-content padding>
  <div *ngIf="this.record === 'all'">
    <ion-list class="item-list" *ngIf="allRecord.voList?.length > 0">
      <ion-item *ngFor="let item of allRecord.voList">
        <h2 class="color-orange" *ngIf="userCode === item.inUserCode">
          +{{item.num | number: '1.2-2'}}
        </h2>
        <h2 class="color-blue" *ngIf="userCode === item.outUserCode">
          -{{item.num | number: '1.2-2'}}
        </h2>
        <p>{{item.outAccount}} {{item.event | enumName: enums.eventTypes}}<span *ngIf="item.outAccount">给</span> {{item.inAccount}}</p>
        <p class="time">{{item.createTime | date:'yyyy-MM-dd HH:mm:SS'}}</p>
        <ion-note item-end>{{item.type | enumName: enums.coinTypes}}</ion-note>
      </ion-item>
    </ion-list>
    <div class="text-center no-data" *ngIf="allRecord.voList?.length === 0">暂无数据</div>

    <ion-infinite-scroll (ionInfinite)="loadMoreAllRecord($event)" [enabled]="allEnable">
      <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>

  <div *ngIf="this.record === 'in'">
    <ion-list class="item-list" *ngIf="inRecord.voList?.length > 0">
      <ion-item *ngFor="let item of inRecord.voList">
        <h2 class="color-orange" *ngIf="userCode === item.inUserCode">
          +{{item.num | number: '1.2-2'}}
        </h2>
        <h2 class="color-blue" *ngIf="userCode === item.outUserCode">
          -{{item.num | number: '1.2-2'}}
        </h2>
        <p>{{item.outAccount}} {{item.event | enumName: enums.eventTypes}}<span *ngIf="item.outAccount">给</span> {{item.inAccount}}</p>
        <p class="time">{{item.createTime | date:'yyyy-MM-dd HH:mm:SS'}}</p>
        <ion-note item-end>{{item.type | enumName: enums.coinTypes}}</ion-note>
      </ion-item>
    </ion-list>
    <div class="text-center no-data" *ngIf="inRecord.voList?.length === 0">暂无数据</div>

    <ion-infinite-scroll (ionInfinite)="loadMoreInRecord($event)" [enabled]="inEnable">
      <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>

  <div *ngIf="this.record === 'out'">
    <ion-list class="item-list" *ngIf="outRecord.voList?.length > 0">
      <ion-item *ngFor="let item of outRecord.voList">
        <h2 class="color-orange" *ngIf="userCode === item.inUserCode">
          +{{item.num | number: '1.2-2'}}
        </h2>
        <h2 class="color-blue" *ngIf="userCode === item.outUserCode">
          -{{item.num | number: '1.2-2'}}
        </h2>
        <p>{{item.outAccount}} {{item.event | enumName: enums.eventTypes}}<span *ngIf="item.outAccount">给</span> {{item.inAccount}}</p>
        <p class="time">{{item.createTime | date:'yyyy-MM-dd HH:mm:SS'}}</p>
        <ion-note item-end>{{item.type | enumName: enums.coinTypes}}</ion-note>
      </ion-item>
    </ion-list>
    <div class="text-center no-data" *ngIf="outRecord.voList?.length === 0">暂无数据</div>

    <ion-infinite-scroll (ionInfinite)="loadMoreOutRecord($event)" [enabled]="outEnable">
      <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
</ion-content>
